<template>
    <div class="container">
        <div class="header">
            <div class="header-left">
                我参加的活动
            </div>
            <router-link class="header-right" to="/Activity">
                <div>
                    <span>更多</span>
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;">
                        <use xlink:href="#icon-jiantouarrow594"></use>
                    </svg>
                </div>
            </router-link>
        </div>
        <div class="content">
            <router-link 
                tag="div" 
                class="act-box" 
                v-for="item of list" 
                :key="item.id"
                :to="'/detail/'+item.id"
            >
                <div class="act-box_hd">
                    <div class="act-box_img" :style="{backgroundImage: 'url(' + item.imgUrl + ')'}"></div>
                </div>
                <div class="act-box_info">
                    <h4 class="act-box__title">{{item.title}}</h4>
                    <div class="act-box__bottom">
                        {{item.time}}
                        <div class="comment-style">
                            <router-link :to="'/comment/' + item.id" tag="span" class="iconfont item-right__iconfont">{{item.status === 2?'&#xeedf;':'&#xe639;'}}</router-link>
                            <router-link to="/interactive" tag="span" class="iconfont item-right__iconfont">&#xeedc;</router-link>
                        </div>
                    </div>
                    
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import { XButton } from 'vux'
export default {
    name: 'HomeMyAct',
    components: {
        XButton
    },
    data () {
        return {
            list:[{
                id: '001',
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '下周三'
            },{
                id: '002',
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '下周三'
            },{
                id: '003',
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '下周三'
            }]
        }
    },
    methods: {
        handleToComment (id) {
            console.log(id)
        } 
    }
}
</script>

<style lang="stylus" scoped>
.container
    margin-bottom: .4rem
    .header
        background: #fff  
        color: #333
        line-height: .78rem
        height: .78rem
        font-size: .3rem
        border-bottom: 1px solid #ddd
        box-sizing:border-box
        box-shadow: 0 0px 1px rgba(0,0,0,0.1)
        .header-left
            float: left
            &:before
                content: ''
                float: left
                width: .06rem
                height: .22rem
                background-color: red
                margin-right: .2rem
                margin-top: .25rem
        .header-right
            min-width: 1.04rem
            float: right
            text-align: center
            font-size: .26rem
            color: #ccc
    .content
        overflow: hidden
        .act-box
            padding: .23rem .3rem
            position: relative
            overflow: hidden
            display: flex
            background: #fff
            border-bottom: 1px solid #ddd
            .act-box_hd
                float: left
                margin-right: .2rem
                width:130px
                .act-box_img
                    width:100%
                    height:0
                    padding-bottom: 75%
                    overflow:hidden
                    background-position: center center
                    background-repeat: no-repeat
                    -webkit-background-size:cover
                    -moz-background-size:cover
                    background-size:cover
            .act-box_info
                float: left
                flex: 1
                padding: .1rem
                box-sizing: border-box
                .act-box__title
                    display: inline-block
                    font-size: 15px
                    line-height: 20px
                    // text-overflow: ellipsis
                    // white-space: nowrap
                    word-wrap: normal
                    word-wrap: break-word
                    word-break: break-all
                .act-box__bottom
                    height: 29px
                    margin-top: .4rem
                    line-height: 29px
                    color: #ccc
                    font-size: 13px
                    position: relative
                    .comment-style
                        position: absolute 
                        right: 0
                        bottom: .0
                        .item-right__iconfont
                            font-size: .4rem
                                


            


</style>